0205191327Highlighting your most recent article entries is quick and easy and can be done on any Flex Layout page — both main and internal.eng641/showcase/assets/tips-article-spotlights-image_tcm12-343810.png/showcase/assets/tips-article-spotlights-thumbnail_tcm12-343811.png<custom:Link urlOnly="true" type="Component" destination="tcm:12-343812" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />2018-06-27T16:19:33ZHighlighting your most recent article entries is quick and easy and can be done on any Flex Layout page — both main and internal.Featuring lists of recent article items on Flex Layout pages12<p xmlns="http://www.w3.org/1999/xhtml">Adding Article Spotlights to your Flex Layout pages is quick and easy! Now you have even more ways to display your article spotlights, which we've highlighted in <a href="http://mn.gov/showcase/training-resources/development-updates/index.jsp?id=12-343791" title="Article Spotlight development update article">one of our Development Updates articles</a>.  You can also check out <a href="https://mn.gov/showcase/content-types/article/article-spotlights.jsp">sample article spotlights page</a> to give you an idea of what they look like in their default state.  Both of the templates labeled "<em>Article Spotlight List</em>" can be used in any Flex Row column — in any column configuration along side other columns or even all by itself.  However, both of the <em>Article Spotlight List Row</em> templates require their own row.  Later on in this article I'll cover this in more detail.  But first, let's cover what you need to do to get started.</p> <h3 xmlns="http://www.w3.org/1999/xhtml">Setting up your Article List configuration file</h3> <p xmlns="http://www.w3.org/1999/xhtml">If you already have an article list out there, you're almost set!  If not, check out our <a href="<custom:Link urlOnly="true" type="Component" destination="tcm:12-1194" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />" title="Article - Create Article List" xlink:title="Article - Create Article List" xmlns:xlink="http://www.w3.org/1999/xlink">user guide on creating an Article List</a>. It's more likely that you won't have to do this if you already have articles out there and will only have to do this when creating a new article list.</p> <p xmlns="http://www.w3.org/1999/xhtml">In the Article List component there are two fields in particular that I want to draw your attention to:  Spotlight Headline and Spotlight Number.  The Spotlight Headline field gives you the option to precede your list of articles with a headline (defaults to an H2 heading).  By no means are you required to use the Spotlight Headline, but sometimes it's useful to give context for your non-sighted users for that list of article items.</p> <p xmlns="http://www.w3.org/1999/xhtml">The other field is Spotlight Number — this is the number of article items that will be listed out on your Article Spotlights.  Typically people list out between three to five articles in their spotlights — any more than that and you're starting to take up valuable real estate.</p> <p xmlns="http://www.w3.org/1999/xhtml">You also have additional options, including the Default Sort Field and Default Sort Direction fields which define by what and how you wish to display your article list.  Most article lists will sort by Date and in Descending order.</p> <p xmlns="http://www.w3.org/1999/xhtml"><strong>IMPORTANT:</strong> You can only have one Article List component for your article list/detail page and wherever you want your article spotlights to appear.  You cannot share multiple Article List components between the same list and expect the links to resolve in the same location.  Simply put:  if you want your article links to work, only one Article List component per Article List.  </p> <h3 xmlns="http://www.w3.org/1999/xhtml">Article spotlights rows</h3> <p xmlns="http://www.w3.org/1999/xhtml">There are two Article Spotlight templates that require their own row (i.e. they cannot share a row with another component) — those two templates are <em>Article Spotlight List Row (with thumbnails)</em> and <em>Article Spotlight List Row (feature image and list)</em>.  You still should include a Flex Row Configuration component for each Article Spotlight List Row component that you include on the page, which allows you to set a contextual headline along with your preferred background color.</p> <p xmlns="http://www.w3.org/1999/xhtml">You also will need to select the following layout configuration:  [ - - - - ] — a single column layout that spans all four columns.  After you've set that value, along with the aforementioned items, you'll be good to go.  Make sure that your Flex Row Configuration component <em><strong>precedes</strong></em> your Article Spotlight List Row component.</p> <h3 xmlns="http://www.w3.org/1999/xhtml">Use cases and tips</h3> <p xmlns="http://www.w3.org/1999/xhtml">Here are a few use cases and some tips for each of the four Article Spotlight templates, ideas to help trigger ways in which you might use these templates to display your article lists.</p> <ul xmlns="http://www.w3.org/1999/xhtml"> <li><strong>Article Spotlight List</strong> — Use these to display a short list of your most recent articles with no thumbnail images. It's best used in a row that follows a more image-heavy row, like one that has Feature Rotators or larger images.  Having a text-only row before or after an image-heavy row offers balance and better content flow. <br /> <br /></li> <li><strong>Article Spotlight List (with thumbnails)</strong> — This template is about the same as the aforementioned template save for the fact that it also includes thumbnails.  We suggest that you consider using square thumbnail images (a 1:1 height/width ratio) for best visual results.  Additionally, take the mobile view into consideration — use images that have a width of 900 pixels and compressed for web usage. Having a 900 pixel wide image will ensure that it spans the width of the viewport when condensed down to tablet sizes. For photo-heavy images, we recommend the JPG format and a 60-80% quality level in Photoshop, depending upon the image; for more text and graphic-oriented images, we recommend the PNG format (PNG-24).    <br /> <br /></li> <li><strong>Article Spotlight List Row (with thumbnails)</strong> — This template behaves differently from the other Article Spotlight List (with thumbnails) template and presents them horizontally, each article item in its own column and the thumbnail presented above each headline. You might find this template a great way to draw more attention to your most recent news items with a little more visual pizzazz. Similar to the previous template, we recommend the use of 900 pixel-wide images as the columns collapse when the browser reaches that 899 pixel threshold.  This spotlight, however, looks great with either square thumbnails or more horizontally oriented thumbnails. <br /> <br /></li> <li><strong>Article Spotlight List Row (feature image and list)</strong> — This last template is quite different from the previous three.  It places special attention to the most recent item in your list, displaying it on the left with the main feature image in your article item, followed by the headlines and short description.  To its right, it displays the remaining list of article items as configured in your Article List component.  For example:  if you set the Spotlight Number to 5 and set your sort to Date and Descending, your most recent article would be featured on the left, and the following four most recent articles would be listed out on the right (with no thumbnails or feature images).  This template is great for when you want to draw the most attention to your most recent article item and subsequent article items carry less weight or importance than the most recent item.  You might use this template if your article list is highlighting upcoming events and want the newest event or highlight to have the most attention drawn to it.</li> </ul> <p xmlns="http://www.w3.org/1999/xhtml">For more ideas, consider coming to our User Group meetings to brainstorm with your fellow users or ask any of our SDL Web (Tridion) developers for some more ideas on how you might use these templates.</p> <h3 xmlns="http://www.w3.org/1999/xhtml">None of my links are resolving right! Help!</h3> <p xmlns="http://www.w3.org/1999/xhtml">We've found a scenario where links in your article spotlight list do not resolve to the article detail page, and instead point to the current page.  This bug is a bi-product of the changes made to the Component Templates that are used by the Article Spotlights. Fortunately the fix is simple — republish all of your pages that are using the <strong>Article Spotlight List</strong> component template and then republish the page using the new Article Spotlight templates.  Re-publishing those pages will force them to be updated with the right code and will also set their linking priority to the correct value. That's all you need do.</p> <h3 xmlns="http://www.w3.org/1999/xhtml">Questions?</h3> <p xmlns="http://www.w3.org/1999/xhtml">If you have any questions about the new templates or how you might best use them, reach out to us and we will gladly lend you a hand.  If you need help implementing a new article list or implementing these templates, please submit a Work Order Request detailing what you need done along with your requirements and other details necessary to complete the work.  If something isn't working right, submit an Incident and we'll see what we can do to resolve the issue.</p>Michael Tangen343812197852789921978512018-06-27T19:31:04Z191327If you're ready to start using the Jumbo Feature Rotator on your website, give this Tips & Tricks article a quick read before you launch out on your own with this new component presentation.eng78991/showcase/assets/jumbo-rotator_feature_tcm12-270201.jpg/showcase/assets/jumbo-rotator_thumbnail_tcm12-270202.jpg<custom:Link urlOnly="true" type="Component" destination="tcm:12-270212" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />2017-01-05T21:01:29ZIf you're ready to start using the Jumbo Feature Rotator on your website, give this Tips & Tricks article a quick read before you launch out on your own with this new component presentation.Selecting the right size and point of interest for your feature photos12<p xmlns="http://www.w3.org/1999/xhtml">We've got a new component template/presentation available in SDL Tridion called the Jumbo Feature Rotator. This is a rotator that sits right beneath the top navigation bar and fills the whole width of your browser window — a template requested by the team that's heading up the Minnesota State Brand initiative.</p> <p xmlns="http://www.w3.org/1999/xhtml">This new template works nearly identically to the already existing feature rotator found on many of our Tridion-hosted sites — you can have one or more feature components, you can use either General Content or Flex Spotlight components, and you are limited to just one feature rotator set per page.  So if you already have a feature rotator on your page and you want to have a jumbo one, you have to choose between one or the other.</p> <p xmlns="http://www.w3.org/1999/xhtml">With this new component presentation, you have two template options to choose from:  Jumbo Feature Rotator, and Jumbo Feature Rotator - Branded.  The former creates a rotator that is fully masked with a translucent gray bar over the image and the text spans nearly the full width of the window.  The latter of the two templates splits it up into thirds — the left third has the Minnesota blue background with white text, and the right two-thirds the image is exposed allowing for a focal point to be displayed.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you use the branded template, choosing the right photograph can be tough with the responsive nature of the web — it will NOT look identical on all browsers because the width of that browser will vary from user to user.  So to help take the guess work out of making images for these full-width feature rotators, I've created a Photoshop template that you can use to create your feature images.  It includes a grid with a "safe zone" indicator, helping you see which portions of your image are guaranteed to display and where you will see varying degrees of visibility.</p> <p xmlns="http://www.w3.org/1999/xhtml">This is what the image itself looks like:</p> <p xmlns="http://www.w3.org/1999/xhtml"><img src="/showcase/assets/jumbo-rotator-grid-1200x400_tcm12-270132.png" title="grid-1200x400" alt="grid-1200x400" class="img-responsive" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="grid-1200x400" /> <br /></p> <p xmlns="http://www.w3.org/1999/xhtml">Here is an example using the grid as an overlay against a sample image to see where the safe zones lie within that photo:</p> <p xmlns="http://www.w3.org/1999/xhtml"><img src="/showcase/assets/jumbo-rotator-sample-photo_tcm12-270215.jpg" class="img-responsive" title="jumbo-rotator-sample-photo" alt="jumbo-rotator-sample-photo" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="jumbo-rotator-sample-photo" /> <br /></p> <p xmlns="http://www.w3.org/1999/xhtml">In this photo, there is a green zone marked "Safe Zone for Branded Rotators" — this area is generally going to display on most device widths.  The orange-yellow area marked "Variable Zone - More Shows with Narrower Window" will degrade in visibility depending upon the width of the browser.  The wider the browser window, the less of that area will display. In this sample, the cap of the mushroom and a portion of the stem is visible in most browser widths — but as the browser gets wider, less of the stem will be visible.</p> <p xmlns="http://www.w3.org/1999/xhtml">In terms of what size image to use, we suggest a working dimension of 1200 pixels by 400 pixels at a resolution of 96 dpi.  However, your agency is free to choose a different height value if you wish — but it will require some CSS overrides to increase (or decrease) the height of your jumbo feature rotators.  Presently, the maximum height is set to 350 pixels.  If you require that value to be something other than the default, please submit a ticket to the Help Desk for us to create an override in your custom.less file that will set the value at your desired height.</p> <p xmlns="http://www.w3.org/1999/xhtml">You may <a href="https://mn365-my.sharepoint.com/:u:/r/personal/michael_tangen_state_mn_us/Documents/shared%20with%20everyone/jumbo-rotator-template.psd.zip?csf=1&amp;web=1&amp;e=Mhhrvj" target="_blank">download this grid template</a> from my SharePoint OneDrive account. If you prefer a .PNG file, you can <a href="https://mn365-my.sharepoint.com/:i:/r/personal/michael_tangen_state_mn_us/Documents/shared%20with%20everyone/jumbo-rotator-grid-1200x400.png?csf=1&amp;web=1&amp;e=9qEtUu" target="_blank">download the PNG file</a> — just be sure to maintain the image size AND its aspect ratio of 1200 x 400 at 96 dpi.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you have any questions, please reach out to me. I'd be glad to help where possible.</p>Michael Tangen2702121978522023-11-06T15:14:31Z191327eng641null/showcase/assets/flex-row-config-image_tcm12-197848.pngnull/showcase/assets/flex-row-thumbnail_tcm12-197850.png<tcdl:Link urlOnly="true" type="Component" destination="tcm:12-197854" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />2016-03-24T17:55:39ZSo your page is breaking, the footer looks funky, and your flex page isn't looking right. Chances are you're doing it wrong. Take a moment and read through these quick tips to make sure that you're setting up your flex pages correctly.A few things that you need to remember when configuring your flex rows12<p xmlns="http://www.w3.org/1999/xhtml">I get it — you probably didn't have the time to watch all of the instructional videos on how to build flex page layouts — we all have a lot on our plates these days. But to get your flex pages looking and behaving correctly, you'll need to take a few moments out of your schedule and read through these tips.</p> <h2 xmlns="http://www.w3.org/1999/xhtml">Setting up your columns correctly</h2> <p xmlns="http://www.w3.org/1999/xhtml"><img src="/showcase/assets/row-configuration-incorrect-settings_tcm12-197849.png" title="row-configuration-incorrect-settings" alt="row-configuration-incorrect-settings" style="width: 500px; height: 217px;" class="photoRightWithBorder" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="row-configuration-incorrect-settings" />I've seen this in one of our customer sites, where they didn't quite follow the instructions in the form field label where you select the layout for the columns in your row.</p> <p xmlns="http://www.w3.org/1999/xhtml">Instructions clearly say to pick the ASCII diagram that represents how you want your columns to be laid out. So in this example, the user chose the text "Three columns (thirds):" which one might assume is correct because it says "three columns (thirds)" — but that's not what the instructions call for.</p> <p xmlns="http://www.w3.org/1999/xhtml">Instead, the correct setting would be to have chosen:  [-][-][-], which is a text-only (ASCII) representation of how the columns would be distributed.  All of the possible acceptable choices are as follows:</p> <p xmlns="http://www.w3.org/1999/xhtml">[----] <br /> [-][--] <br /> [--][-] <br /> [-][---] <br /> [--][--] <br /> [---][-] <br /> [--][-][-] <br /> [-][--][-] <br /> [-][-][--] <br /> [-][-][-] <br /> [-][-][-][-]</p> <p xmlns="http://www.w3.org/1999/xhtml">For your convenience, we've put text labels above each item to help describe how many columns there are and how they will be distributed.  Unfortunately, SDL Tridion's GUI limits our ability to customize drop-down fields.  We're unable to put option groups with each set of options, so instead we have to lump everything together — both the actual values we want you to select, and the option group labels above each set.</p> <p xmlns="http://www.w3.org/1999/xhtml">So don't choose the actual text description (e.g. "Two Columns (fourths):"), choose the ASCII visual representation.  Should you make the mistake of choosing the wrong thing, the template will default to a setting of four columns distributed in fourths.</p> <h2 xmlns="http://www.w3.org/1999/xhtml">Make sure the number of components in your row matches your row configuration</h2> <p xmlns="http://www.w3.org/1999/xhtml">If your setting is three columns, make sure you have three components in your row.  If you have a two column configuration, make sure you have two components.  If your row is one component short, <em><strong>your page will break</strong></em>. </p> <p xmlns="http://www.w3.org/1999/xhtml">If you absolutely must have a blank column with nothing in it (to function as a spacer), create a General Content component without any body copy in it, and use the component template "General Content - no title" and it will present a blank component for your column.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you have one more component in your row than you have configured for (e.g. four components following a row configuration of three columns) that fourth component will be displayed on its own row and without any background color configuration (white, dark gray, or branded).  </p> <p xmlns="http://www.w3.org/1999/xhtml">But the bigger take-away is: <em><strong>remember your component count must match your row configuration!</strong></em> </p> <h2 xmlns="http://www.w3.org/1999/xhtml">Accepted list of component presentations for flex pages</h2> <p xmlns="http://www.w3.org/1999/xhtml">If you inserted a component, you published the page, and that component isn't displaying on your page — chances are you're using a template that is not supported on this page template. Here are the list of supported component templates for both flex page templates (main and internal):</p> <ul xmlns="http://www.w3.org/1999/xhtml"> <li>All page introduction and jumbotron templates</li> <li>All feature rotator templates (default dark/light, overlay dark/light, side dark/light),</li> <li>Feature Spotlight (with both H2/H3 heading)</li> <li>General Content</li> <li>General Content - no title</li> <li>Callout Box Quote</li> <li>Callout Box Sidebar Content</li> <li>Multimedia Item - inline with text</li> <li>Multimedia Item - inline no text</li> <li>Flex Spotlight</li> <li>Article Spotlight List</li> <li>Code Block</li> <li>Flex Row Configuration</li> <li>Caspio App</li> <li>Location</li> <li>Personnel List</li> <li>Personnel Detail</li> <li>Trumba Calendar</li> </ul> <p xmlns="http://www.w3.org/1999/xhtml">If you're using a template that's not listed above, your component will not display.  We will likely add to this list at a later date, but in the meantime has everything you need to create a fantastic looking home page or custom layout for an internal page.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you have additional questions, or if there are additional tips or tricks you'd like to see addressed, let us know!</p>Michael Tangen19785411271978511978522016-03-24T18:26:41Z191327eng191331null/showcase/assets/heading-order_tcm12-191383.png<tcdl:Link urlOnly="true" type="Component" destination="tcm:12-191384" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />2016-03-17T09:05:22ZLearn a few ways to ensure proper heading sequence with your pages that use toggle list items, both FAQ and tabbed style content.Take advantage of Toggle List Section Heading templates12<img src="/showcase/assets/heading-order_tcm12-191383.png" title="Heading Order" alt="Heading Order" style="float: right; width: 300px; height: 300px;" class="photoRightNoBorder" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="heading-order" /> <p xmlns="http://www.w3.org/1999/xhtml">Accessibility is very important and was at the forefront of many of the decisions that we've made to help ensure that you build accessible web content. With toggle list pages — pages that allow you to present FAQ, tabbed, or anchor style content — we've set up a specific document structure for you to work within, attempting to balance flexibility and creative control with the rigidity that's required to ensure compliance.</p> <p xmlns="http://www.w3.org/1999/xhtml">We're kicking off a new tips and tricks series of articles with this topic, showing you the ways that you can achieve proper heading order using one of a few options.  If you'd like more information on semantic structure and the importance of correct heading order in a web page, read <a href="http://webaim.org/techniques/semanticstructure/" title="opens a new window to an article on semantic structure" target="_blank">WebAIM's article on semantic structure</a>.</p> <h2 xmlns="http://www.w3.org/1999/xhtml">A few assumptions we must make</h2> <p xmlns="http://www.w3.org/1999/xhtml">First off we need to communicate a few assumptions that we've had to make, none of which were made in a vacuum and operated within the context of the Web Content Management Advisory Team.  The primary assumption is the structure of a page containing toggle list items. We presume that the basic structure of a page that supporting a single or multiple group of toggle lists will look something like this:</p> <ul xmlns="http://www.w3.org/1999/xhtml"> <li>an introduction of some sorts for your page content,</li> <li>a contextual heading for your toggle list group, and </li> <li>the group of toggle list items, whether they be tabbed content, FAQ style items, or a list of content with anchor links</li> </ul> <p xmlns="http://www.w3.org/1999/xhtml">Assuming this structure, our templates presume the order:  Page Introduction (component title presented with heading one), Toggle List Section Heading (the component title presented with heading two), and each toggle list item (each with heading level three. We know that your content will not always fit that model, which is why you have a few options at your disposal to fulfill the requirement of the valid progression of inheritance from H1 to H2 to H3 and so on.</p> <h2 xmlns="http://www.w3.org/1999/xhtml">Option one: using the Toggle List Section Heading component template</h2> <img src="/showcase/assets/tips-and-tricks-toggle-list-headings_tcm12-191329.png" title="screenshot of component and component template pairing" alt="screenshot of component and component template pairing" class="photoRightWithBorder" style="width: 500px; height: 172px;" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="tips-and-tricks-toggle-list-headings" /> <p xmlns="http://www.w3.org/1999/xhtml">This option is perhaps the most ideal scenario — you start out your page assembly with a page introduction about the overall content of your page.  That page introduction uses an H1 for the display title, setting the stage for the context of that page.  You then set up a section heading which precedes your group of toggle list items (whether they be tabbed or FAQ style presentations). The component template "Toggle List Section Heading" uses an H2 for its display title. And then all the toggle list items that follow will present their headings starting at the H3 level.</p> <p xmlns="http://www.w3.org/1999/xhtml">A quick bulleted recap of the order of presentation:</p> <ul xmlns="http://www.w3.org/1999/xhtml"> <li>Page Introduction template (General Content component schema, uses H1 for the title, displays both title and body content)</li> <li>Toggle List Section Heading template (General Content component schema, uses H2 for the title, displays both the title and body content)</li> <li>Tab List Item or Anchor Link Item template (Toggle List Item component schema, uses H3 for the display title in the Tab and Anchor heading but not the Toggle List Item [FAQ] component template).</li> </ul> <h2 xmlns="http://www.w3.org/1999/xhtml">Option two: Don't use a page introduction, but still use the Toggle List Section Heading</h2> <p xmlns="http://www.w3.org/1999/xhtml">If for some reason you do not want the excess content introduced by having an additional component introducing your group of toggle list items [editorial note: frankly a missed marketing and search engine optimization opportunity for adding keyword/content weight to your page], you can take your existing General Content component and change the component template from Page Introduction to Toggle List Section Heading.  It will still display your title and body content, but the title will be displayed as an H2 instead of an H1.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you're asking yourself, "well what about the opening H1 tag?" technically it is covered.  All Tridion 2013 sites start out with their site name as an opening H1 tag.  While there are two different perspectives in the accessibility community about the quantity of H1 tags allowed on a page, we have adopted the philosophy that it is acceptable to have two H1 tags — the overall site name, and then your page title.  So from a technical standpoint, your opening H1 tag is technically already covered should you decide to open up your toggle list page with a Toggle List Section Heading.</p> <p xmlns="http://www.w3.org/1999/xhtml">A quick bulleted recap of the order of presentation:</p> <ul xmlns="http://www.w3.org/1999/xhtml"> <li>Toggle List Section Heading template (General Content component schema, uses H2 for the title, displays both the title and body content)</li> <li>Tab List Item or Anchor Link Item template (Toggle List Item component schema, uses H3 for the display title in the Tab and Anchor heading but not the Toggle List Item [FAQ] component template).</li> </ul> <h2 xmlns="http://www.w3.org/1999/xhtml">Option three: Using the template General Content - no title</h2> <img src="/showcase/assets/tips-and-tricks-heading-2_tcm12-191375.png" title="screenshot of Heading 2 section type selection" alt="screenshot of Heading 2 section type selection" style="float: right; width: 300px; height: 70px;" class="photoRightWithBorder" xmlns="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:title="tips-and-tricks-heading-2" /> <p xmlns="http://www.w3.org/1999/xhtml">There's always a work-around to both accomplish your end-goal and still meet accessibility requirements.  Should you find yourself in a situation where you just cannot come up with adequate content for a page introduction <strong><em>and</em></strong> a section heading, you can use the General Content - no title component template.  The page will ignore the title of your component and only display the body copy of your opening component.  In that body copy, you will need an opening headline that uses the H2 Section Type.</p> <p xmlns="http://www.w3.org/1999/xhtml">In the WYSIWYG editor, highlight your opening headline text, and change the Section Type to Heading 2.  This will surround that selected text with an H2 tag, and as long as this appears <em>before</em> your group of toggle list items, will keep you in accessibility compliance as far as heading order is concerned.</p> <h2 xmlns="http://www.w3.org/1999/xhtml">Recap and recommendations</h2> <p xmlns="http://www.w3.org/1999/xhtml">Both option two and three, are acceptable solutions and keep you within compliance — and may be particularly valuable if you are linking to your current Page Introduction component.  You can change the component template accordingly (and maybe make adjustments to the body copy if necessary) to fulfill the correct heading sequence while maintaining all present component links to that component/page.</p> <p xmlns="http://www.w3.org/1999/xhtml">With that said, we would highly recommend following option one — establish your page introduction component with an opening H1, follow it up with a section heading (which uses an H2), and then your toggle list items (which use an H3).  For some scenarios this may seem like excessive content — particularly if you feel there is not much to be said on the matter — but it can also be viewed as a missed opportunity for search engine optimization and to further "sell" the information from a marketing perspective (when appropriate).  Content that is contained within headings and that follows is valuable information for search engines and increases your rank and relevance when used correctly. So before you use the quick and easy solutions of option two or three, consider how you might add value and weight to your page by including both a page introduction and a toggle list section heading.</p>Michael Tangen19138411271913302016-03-17T11:58:14Z191327<tcdl:Link urlOnly="true" type="Component" destination="tcm:12-242625" templateURI="tcm:0-0-0" origin="tcm:0-0-0" />2013-02-05T18:49:47ZSome agencies don't have graphic designers on staff nor access to high-end tools like Photoshop. Well, we've put together a tutorial video on how to take quality stock photography, size them down with a free online image editor, and integrate them into your rotating features in Tridion.12<p xmlns="http://www.w3.org/1999/xhtml">Some agencies don't have graphic designers on staff nor access to high-end tools like Photoshop.  Well, we've put together a tutorial video on how to take quality stock photography, size them down with a free online image editor, and integrate them into your website.</p> <iframe width="560" height="315" frameborder="0" src="https://www.youtube.com/embed/gS-16f7oC5I" allowfullscreen="" xmlns="http://www.w3.org/1999/xhtml" /> <p xmlns="http://www.w3.org/1999/xhtml">You <em>never</em> want to import high-resolution, high-file-size photographs for direct use in Tridion — scaling them down in the rich text editor does not actually reduce the file size, just the dimensions that the photo is presented in.  Instead, you need to scale down your photos outside of Tridion, scaling them down to the size that you need, and <em>then</em> bring them into Tridion.</p> <p xmlns="http://www.w3.org/1999/xhtml">If you don't have access to YouTube at work, copy this URL and watch it at your convenience in a place where you can get access:  <a href="http://youtu.be/gS-16f7oC5I" target="_blank">http://youtu.be/gS-16f7oC5I</a>  </p> <p xmlns="http://www.w3.org/1999/xhtml">We hope that the demonstration proves helpful and informative for those that are new at working with images in Tridion.</p>2426252016-05-26T18:00:51Z